<template>
    <div class="home">
        <mt-header :title="longTitle">
            <router-link to="/companyAddress" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <process :gotocolor="gotocolor"></process>
        <!--<ShowList :entryData="BankAccount" @showList="showList"></ShowList>-->
        <ShowListInput :needData="BankAccount" :placeholder="BankPlaceholder" @inputChange="BankChange"
                       :inputValue="BankValue">>
        </ShowListInput>

        <ShowListInput :needData="needData" class="marT-5" :placeholder="placeholder" @inputChange="inputChange"
                       :inputValue="inputValue"></ShowListInput>
        <ShowList :entryData="BankAccountBank" @showList="showList">
        </ShowList>

        <tips v-for="tips of tipsData" :tips="tips"></tips>
        <com-button btnClass="next-btn"
                    @btn-click="goTo"
                    :disabled="nextBtnDisabled">下一步
        </com-button>
        <!--<Popup :popupVisible="popupVisible" @change="change">-->
        <!--<picker @cancel="cancel" :ChooseName="ChooseName" :slotData="slotData" @companyName="companyName"></picker>-->
        <!--</Popup>-->
    </div>
</template>
<script>
    import MyButton from '@/components/MyButton.vue'
    import ShowList from '@/components/ShowList.vue'
    import tips from '@/components/tips.vue'
    import ShowListInput from '@/components/ShowListInput.vue'
    import Popup from '@/components/Popup.vue'
    import picker from '@/components/picker.vue'
    import process from '@/components/process.vue'
    import {mapState, mapMutations, mapActions} from 'vuex'
    import {Header} from 'mint-ui';
    import merchantAccount from "../store/modules/merchantAccount";
    import {Toast} from 'mint-ui';
    import ComButton from '@/components/com-button.vue';
    import {
        MERCHANTACCOUNT_NEXT_BUTTON_CHECK, SEND_INFO_DATA, MERCHANTACCOUNT_SHOW_SELECT_LIST,
        MERCHANTACCOUNT_GET_INPUT_VALUE, MERCHANTACCOUNT_GET_BANK_CHANGE
    } from '../store/types'


    export default {
        name: "merchantAccount",
        components: {
            MyButton,
            ShowList,
            tips,
            ShowListInput,
            Popup,
            picker,
            process,
            Header,
            ComButton
        },
        computed: {
            ...mapState('merchantAccount', ['popupVisible', 'ChooseName', 'OppName',
                'placeholder', 'BankAccountBank', 'slotData', 'inputValue', 'BankValue',
                'infoData', 'textData', 'nextBtnDisabled', 'branchListCode']),
        },
        data() {
            return {
                BankPlaceholder: '请输入银行账户',
                ButtonNext: '提交',
                gotocolor: {color: '#2dbbfd'},
                BankAccount: "银行账户",
                needData: '账户名称',
                tipsData: ["所有认证账户必须为借记账户，该账户将作为银联商务向开户方资金入账的结算账户。", "请仔细核实账户信息。", "开户行以及开户支行将在您输入结算银行账户后系统自动识别检测"],
                longTitle: '商户账户信息'

            }
        },
        mounted() {
            this.MERCHANTACCOUNT_NEXT_BUTTON_CHECK()
        },
        methods: {
            ...mapMutations('merchantAccount', [MERCHANTACCOUNT_SHOW_SELECT_LIST, 'selectCancle', 'selectChange',
                MERCHANTACCOUNT_GET_INPUT_VALUE, MERCHANTACCOUNT_GET_BANK_CHANGE, MERCHANTACCOUNT_NEXT_BUTTON_CHECK]),
            ...mapActions('merchantAccount', [SEND_INFO_DATA]),
            showList: function (value) {
                this.MERCHANTACCOUNT_SHOW_SELECT_LIST(value)
            },
            // cancel() {
            //     this.selectCancle()
            // },
            // change() {
            //     this.selectChange()
            // },
            companyName: function (value) {
                // if (this.OppName == "BankAccountBank") {
                //     this.BankAccountBank[0].choose = value.join("-")
                //     this.MERCHANTACCOUNT_NEXT_BUTTON_CHECK()
                //     // this.slotData[0].values = [123,123]
                // } else if (this.OppName == "BankBranch") {
                //     this.BankAccountBank[1].choose = value.join("-")
                //     this.MERCHANTACCOUNT_NEXT_BUTTON_CHECK()
                // }
            },
            inputChange(value) {
                this.MERCHANTACCOUNT_GET_INPUT_VALUE(value),
                    this.MERCHANTACCOUNT_NEXT_BUTTON_CHECK()
            },
            BankChange(value) {
                this.MERCHANTACCOUNT_GET_BANK_CHANGE(value),
                    this.MERCHANTACCOUNT_NEXT_BUTTON_CHECK()
            },
            goTo() {
                if (this.inputValue == "" ||
                    this.BankValue == "" ||
                    this.BankAccountBank[0].choose == "") {
                    Toast('请填入必填项')
                    return false
                }
                this.SEND_INFO_DATA()
            }
        },
    }
</script>
<style scoped>
    .marT-5 {
        margin-top: 5px;
    }
</style>